import 'package:auto_route/annotations.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

import '../../config/Config.dart';

@RoutePage()
class DrawImage extends StatefulWidget {
  const DrawImage({super.key});

  @override
  State<DrawImage> createState() => _DrawImageState();
}

class _DrawImageState extends State<DrawImage> {
  late int imageRateIndex = 0;
  late bool agree = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AI绘图'),
        flexibleSpace: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('asset/images/bg_create_title2.png'),
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
        leading: BackButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        centerTitle: true,
        actions: const [
          Text("历史记录"),
          SizedBox(
            width: 16,
          )
        ],
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(50.0), // 设置高度
          child: SizedBox(
            height: 50.0,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Image.asset(
                        "asset/images/icon_star2.png",
                        width: 14,
                      ),
                      const SizedBox(
                        width: 4,
                      ),
                      const Text(
                        "描述",
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                  FilledButton(
                    style: ButtonStyle(
                      backgroundColor: WidgetStateProperty.all(
                        Config.colorC9d7fc,
                      ),
                    ),
                    onPressed: () {},
                    child: Text(
                      "描述生成器",
                      style: TextStyle(
                        color: Config.color363c4c,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Config.colorF1EeFf, Colors.white],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        padding: const EdgeInsets.all(16),
        child: ListView(
          children: [
            Container(
              padding: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                border: Border.all(
                  color: Config.color69f,
                  width: 1.5,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: const TextField(
                maxLines: 12,
                minLines: 12,
                decoration: InputDecoration(
                  hintText:
                      "请输入描述画面内容，描述的形式:(主语)、(设定)、(修饰语或者艺术家)。例如:白狐、梦幻修饰、手绘头像...",
                  border: InputBorder.none,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Row(
                children: [
                  const Text("示例："),
                  Wrap(
                    children: List.generate(3, (index) {
                      return Card(
                        elevation: 0,
                        color: index > -1 ? Config.colorF9 : Colors.red,
                        child: const Padding(
                          padding: EdgeInsets.symmetric(
                            vertical: 4,
                          ),
                          child: Text(
                            "湖面，天空，月色",
                            style: TextStyle(
                              fontSize: 10,
                            ),
                          ),
                        ),
                      );
                    }),
                  ),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 4),
              child: Row(
                children: [
                  Row(
                    children: [
                      Image.asset(
                        "asset/images/icon_star2.png",
                        width: 14,
                      ),
                      const SizedBox(
                        width: 4,
                      ),
                      const Text(
                        "风格",
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            GridView.count(
              crossAxisCount: 4,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              children: List.generate(12, (index) {
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4.0),
                    side: BorderSide(
                      color: Colors.red,
                      width: index == 2 ? 2.0 : 0,
                    ),
                  ),
                  clipBehavior: Clip.hardEdge,
                  child: Stack(
                    children: [
                      CachedNetworkImage(
                        imageUrl:
                            "https://wanx.alicdn.com/model/gufengrenxiang.png",
                        fit: BoxFit.cover,
                      ),
                      Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        child: Container(
                          padding: const EdgeInsets.symmetric(vertical: 4),
                          color: Colors.black.withOpacity(0.6),
                          child: const Text(
                            "复古漫画",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                );
              }),
            ),
            Container(
              padding: const EdgeInsets.only(bottom: 4, top: 8),
              child: Row(
                children: [
                  Row(
                    children: [
                      Image.asset(
                        "asset/images/icon_star2.png",
                        width: 14,
                      ),
                      const SizedBox(
                        width: 4,
                      ),
                      const Text(
                        "图片比例",
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 39 / 32,
              ),
              itemCount: 3,
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return getImageRate(index);
              },
            ),
            getTitle("通道"),
            Row(
              children: [
                Checkbox(
                  activeColor: Config.color69f,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(24),
                  ),
                  value: agree,
                  onChanged: (val) {
                    setState(() {
                      agree = val!;
                    });
                  },
                ),
                const Text("会员通道（预计60s,剩余20次/天）"),
              ],
            ),
            FilledButton(
              style: ButtonStyle(
                backgroundColor: WidgetStateProperty.all(Config.color69f),
              ),
              onPressed: () {},
              child: const Text("生成作品"),
            ),
          ],
        ),
      ),
    );
  }

  Widget getImageRate(int index) {
    late String text = "768*768";
    if (index == 1) {
      text = "768*1024";
    } else if (index == 2) {
      text = "1024*768";
    }
    return GestureDetector(
      onTap: () {
        setState(() {
          imageRateIndex = index;
        });
      },
      child: Card(
        color: Colors.white,
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4.0),
        ),
        clipBehavior: Clip.hardEdge,
        child: Stack(
          children: [
            Image.asset(
              "asset/images/selector_ai_draw_img_ratio_bg${index == imageRateIndex ? 1 : 2}.png",
              fit: BoxFit.contain,
            ),
            Positioned(
              left: 0,
              right: 0,
              top: 24,
              bottom: 0,
              child: Center(
                child: Column(
                  children: [
                    Image.asset(
                      "asset/images/ic_ai_draw_img_ratio_${index + 1}${index == imageRateIndex ? '_select' : ''}.png",
                      width: 50,
                    ),
                    Text(
                      text,
                      style: TextStyle(
                        color: Config.color3b,
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget getTitle(String title) {
    return Container(
      padding: const EdgeInsets.only(bottom: 4),
      child: Row(
        children: [
          Row(
            children: [
              Image.asset(
                "asset/images/icon_star2.png",
                width: 14,
              ),
              const SizedBox(
                width: 4,
              ),
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
